.switcher {
  cursor: pointer;
  display: inline-block;
  color: $white;
  line-height: 24px;

  input {
    display: none;
  }

  label {
    width: 48px;
    height: 24px;
    background: #2B97C5;
    display: inline-block;
    border-radius: 12px;
    cursor: pointer;
    margin: 0 12px;
    font-weight: 400;

    &::after {
      width: 16px;
      height: 16px;
      display: block;
      content: '';
      background: $white;
      border-radius: 14px;
      position: relative;
      top: 4px;
      left: 4px;
      transition: left 0.15s ease;
    }
  }

  input:checked ~ label[for="switch-plan"]::after { // sass-lint:disable-line force-pseudo-nesting force-attribute-nesting no-qualifying-elements
    left: 28px;
  }

  .label-1,
  .label-2 {
    position: absolute;
  }

  .label-1 {
    float: left;
    left: -55px;
  }

  .label-2 {
    float: right;
    right: -40px;
  }

  label[for="switch-plan"]:not(.checked) { // sass-lint:disable-line force-pseudo-nesting force-attribute-nesting no-qualifying-elements

    .label-2 {
      opacity: 0.5;
    }
  }

  label[for="switch-plan"].checked {// sass-lint:disable-line force-attribute-nesting no-qualifying-elements

    &::after {
      left: 28px;
    }

    .label-1 {
      opacity: 0.5;
    }

    .label-2 {
      opacity: 1;
    }
  }
}
